<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sort{
            cursor: pointer;
        }
        .dialog{
            position: absolute;
            top:0px;
            left:0px;
            width: 100%;
            height: 100%;
            background-color: rgba(255,0,0,0.5);
            visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .contentDiv{
            width: 400px;
            height: 300px;
            padding: 30px;
            border: 2px solid #000;
            background-color: white;
        }
    </style>

    <script src="product.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        window.onload = function (){
            showTable(productArray);
        }

        /**
         * 用指定数组更新表格
         */
        function showTable(array){
            var str = "";
            array.forEach(n => {
               str += `<tr><td>${n.code}</td><td>${n.name}</td>
                    <td>${n.price}</td><td>${n.createDate}</td>
                    <td><input type="button" value="删除" onclick="del(${n.code})">
                    <input type="button" value="修改" onclick="findByCode(${n.code})"></td></tr>`;
            });
            $("data").innerHTML = str;
        }

        function findByCode(code){
            //显示修改对话框
            $("updateDiv").style.visibility = "visible";
            //查询指定编号对应商品
            var pobj = productArray.find(n => n.code == code);
            //将商品信息填充span
            $("codeSpan").innerHTML = code;
            $("nameSpan").innerHTML = pobj.name;
            $("updatePrice").value = pobj.price;
            $("dateSpan").innerHTML = pobj.createDate;
        }

        /**
         * 删除商品
         * @param code 要删除商品的编号
         */
        function del(code){
            //找到指定编号对应商品的下标
            let index = productArray.findIndex(n => n.code == code);
            productArray.splice(index,1);
            showTable(productArray);
        }

        /**
         * 排序
         * @param fieldName 排序属性名
         */
        function sortProduct(fieldName){
            productArray.sort((a,b) => b[fieldName] - a[fieldName]);
            showTable(productArray);
        }

        /**
         * 按商品名搜索
         */
        function findByName(){
            var newArray = productArray.filter(n =>
                n.name.indexOf($("productName").value) != -1);
            showTable(newArray);
        }

        /**
         * 显示指定div
         * @param divId div的id
         */
        function showDiv(divId){
            $(divId).style.visibility = "visible";
        }

        /**
         * 添加商品
         */
        function addProduct(){
            var productObj = {code:$("pcode").value,name:$('pcode').value,
                    price:$("price").value,createDate:$('createDate').value};
            //添加进商品数组
            productArray.push(productObj);
            showTable(productArray);
            $("addDiv").style.visibility = "hidden";
        }

        /**
         * 修改商品
         */
        function updateProduct(){
            //找到要修改商品的对象
            let pobj =  productArray.find(n => n.code == $("codeSpan").innerHTML);
            pobj.price = $("updatePrice").value;
            showTable(productArray);
            $("updateDiv").style.visibility = "hidden";
        }
    </script>
</head>
<body>
    请输入商品名：<input type="text" id="productName">
    <input type="button" value="搜索" onclick="findByName()"><br>
    <table border="1" width="80%" cellspacing="0">
        <thead>
            <tr><th class="sort" onclick="sortProduct('code')">编号</th><th>商品名</th>
                <th class="sort" onclick="sortProduct('price')">单价</th><th>日期</th>
                <th>操作</th></tr>
        </thead>
        <tbody id="data"></tbody>
    </table>
    <input type="button" value="添加" onclick="showDiv('addDiv')">
    <div id="addDiv" class="dialog">
        <div class="contentDiv">
            商品编号：<input type="text" id="pcode"><br>
            商品名：<input type="text" id="pname"><br>
            商品单价：<input type="text" id="price"><br>
            生产日期：<input type="text" id="createDate"><br>
            <input type="button" value="添加" onclick="addProduct()">
        </div>
    </div>

    <div id="updateDiv" class="dialog">
        <div class="contentDiv">
            商品编号：<span id="codeSpan"></span><br>
            商品名：<span id="nameSpan"></span><br>
            商品单价：<input type="text" id="updatePrice"><br>
            生产日期：<span id="dateSpan"></span><br>
            <input type="button" value="修改" onclick="updateProduct()">
        </div>
    </div>
</body>
</html>